<template>
  <div class="bottom-grounps">
    <mu-badge :content="completeAmount" circle color="secondary" class="demo-icon-badge">
      <mu-icon :class="{'active':isActive}" value="未完成" @click="category(1)"></mu-icon>
    </mu-badge>
    <mu-badge :content="incompleteAmount" circle color="secondary" class="demo-icon-badge">
      <mu-icon :class="{'active':!isActive}" value="已完成" @click="category(2)"></mu-icon>
    </mu-badge>
  </div>
</template>

<script>
export default {
  name:'bottomgrounp',
  props:{
    // 已完成
    completeAmount:{
      type: String,
      default: '0'
    },
    // 未完成
    incompleteAmount:{
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      isActive: true
    }
  },
  methods: {
    category(val){
      // 1代表已完成，2代表未完成
      if(val === 1){
        this.isActive = true
        this.$emit('category',1)
      }else{
        this.isActive = false
        this.$emit('category',2)
      }
    }
  },
  
}
</script>

<style lang="scss" scoped>
.bottom-grounps{
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  position: fixed;
  display: flex;
  justify-content: space-around;
  bottom: 0;
  width: 100vw;
  background-color:$color-bg;
  z-index:99;
}
.badge-list-wrap {
  width: 100%;
  max-width: 360px;
  background-color: #fff;
  margin: 0 auto;
}
.demo-icon-badge {
  padding: 12px;
  margin-right: 16px;
  .mu-icon{
    &:first-child{
      &.active{
        color:red;
      }
    }
    &:last-child{
      &.active{
        color:red;
      }
    }
  }
}
</style>